<h2 mat-dialog-title>{{ isEdit ? 'Edit' : 'Create' }} Browser Profile</h2>
<mat-dialog-content class="mat-typography">
    <mat-stepper orientation="vertical" #stepper>
        <!-- Basic info -->
        <mat-step [stepControl]="basicInfoFormGroup">
            <form [formGroup]="basicInfoFormGroup">
                <ng-template matStepLabel>Basic information</ng-template>
                <mat-form-field>
                    <mat-label>Name</mat-label>
                    <input matInput placeholder="Profile name" formControlName="profileName" required />

                    @if (
                        basicInfoFormGroup.get('profileName')?.invalid && basicInfoFormGroup.get('profileName')?.touched
                    ) {
                        <mat-error> Profile name is required. </mat-error>
                    }
                </mat-form-field>

                <mat-form-field>
                    <mat-label>Group</mat-label>
                    <input
                        matInput
                        placeholder="Group name"
                        formControlName="groupName"
                        [matAutocomplete]="groupNameAuto"
                    />
                    <mat-autocomplete autoActiveFirstOption #groupNameAuto="matAutocomplete">
                        @for (groupName of filteredGroupNames | async; track groupName) {
                            <mat-option [value]="groupName">
                                {{ groupName }}
                            </mat-option>
                        }
                    </mat-autocomplete>
                </mat-form-field>

                @if (true) {
                    <mat-form-field>
                        <mat-label>Description</mat-label>
                        <textarea matInput formControlName="description" placeholder="Type a description"></textarea>
                    </mat-form-field>
                }

                <div>
                    <button mat-button matStepperNext>Next</button>
                </div>
            </form>
        </mat-step>

        <!-- Import profile -->
        <mat-step [stepControl]="botProfileInfoGroup">
            @if (basicInfo) {
                <div>
                    <p>Version: {{ basicInfo.version }}</p>
                    <p>User Agent: {{ basicInfo.userAgent }}</p>
                    <p>Unmasked Vendor: {{ basicInfo.unmaskedVendor }}</p>
                    <p>Unmasked Renderer: {{ basicInfo.unmaskedRenderer }}</p>
                </div>
            }

            @if (!botProfileInfoGroup.value.content) {
                <mat-error> Bot Profile is required. </mat-error>
            }

            <form [formGroup]="botProfileInfoGroup">
                <ng-template matStepLabel>
                    {{ isEdit ? 'Replace Bot profile' : 'Bot profile' }}
                </ng-template>
                <mat-label>Select a bot profile:</mat-label>
                <button mat-button (click)="chooseFile()">Choose File</button>
                <div>
                    <button mat-button matStepperNext>Next</button>
                </div>
            </form>
        </mat-step>

        <!-- Proxy info -->
        <mat-step [stepControl]="proxyInfoGroup">
            <form [formGroup]="proxyInfoGroup">
                <ng-template matStepLabel>Proxy information</ng-template>
                <mat-form-field>
                    <mat-label>Proxy server</mat-label>
                    <input matInput placeholder="user:pass@host:port" formControlName="proxyServer" />
                </mat-form-field>
                <div>
                    <button mat-button matStepperNext>Next</button>
                </div>
            </form>
        </mat-step>

        <!-- Variable info -->
        @if (variablesInfoGroup) {
            <mat-step [stepControl]="variablesInfoGroup">
                <form [formGroup]="variablesInfoGroup">
                    <ng-template matStepLabel>Other configurations</ng-template>

                    <mat-form-field>
                        <mat-label>Path of the BotBrowser executable</mat-label>
                        <input matInput formControlName="binaryPath" />

                        @if (variablesInfoGroup.get('binaryPath')?.errors?.invalidBinaryPath) {
                            <mat-error>
                                {{ variablesInfoGroup.getError('invalidBinaryPath') }}
                            </mat-error>
                        }
                    </mat-form-field>
                </form>
            </mat-step>
        }
    </mat-stepper>
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-button cdkFocusInitial (click)="onConfirmClick()">
        {{ isEdit ? 'Save' : 'Create' }}
    </button>
</mat-dialog-actions>
